<template>
  <div>
    <!-- 数据持久化：
        1：存：值修改了就存储到浏览器
        2：取：初始值取浏览器存储
    -->

    <div>{{ num }}</div>
    <button @click="btnClick">点击++</button>
  </div>
</template>
<script>
export default {
  data() {
    return {
      num: +localStorage.getItem('num') || 10
    }
  },
  methods: {
    btnClick() {
      this.num++
      localStorage.setItem('num', this.num)
    }
  }
}
</script>
<style></style>
